import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import "@/tailwind-variables.less";
import { useEffect, useState } from "react";
import { optionsRequest } from "./service";
import { useStore } from "./store";

const convertDataToSelect = (
  array: any[],
  labelKey: string,
  valueKey: string
) => {
  return array.map((item) => ({
    label: item[labelKey],
    value: item[valueKey],
  }));
};

interface Option {
  label: string;
  value: string;
}

export const LeftRightChange = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [options, setOptions] = useState<Option[]>([]);
  const { currentValue, updateCurrentValue } = useStore((state: any) => ({
    updateCurrentValue: state.updateCurrentValue,
    currentValue: state.currentValue,
  }));
  const mount = async () => {
    const array = await optionsRequest();
    setOptions(convertDataToSelect(array, "name", "value"));
    updateCurrentValue(options[currentIndex]?.value);
  };
  useEffect(() => {
    mount();
    return () => {};
  }, []);
  const leftChange = () => {
    if (currentIndex > 0) {
      const nextIndex = currentIndex - 1;
      setCurrentIndex(nextIndex);
      updateCurrentValue(options[nextIndex]?.value);
    }
  };
  const rightChange = () => {
    if (currentIndex < options.length - 1) {
      const nextIndex = currentIndex + 1;
      setCurrentIndex(nextIndex);
      updateCurrentValue(options[nextIndex]?.value);
    }
  };
  return (
    <div>
      <div className="flex justify-between w-24">
        <LeftOutlined onClick={leftChange} />
        <div>{options?.[currentIndex]?.label}</div>
        <RightOutlined onClick={rightChange} />
      </div>
      <div className="mt-3">store的值 {currentValue}</div>
    </div>
  );
};
